<!--<template>
  <div class="page-one">
    <div class="jinguan">
      <!-- 内容区域 -->
      <div class="context">
        <!-- 轮播图 -->
        <div class="rotation-map">
          <compon-swiper></compon-swiper>
        </div>
        <div class="nav">
          <ul>
            <li>
              <img src="../../assets/游戏.png" alt="" /><br />
              <span>锦官Joy</span>
            </li>
            <li>
              <img src="../../assets/饮品.png" alt="" /><br />
              <span>锦官Love</span>
            </li>
            <li>
              <img src="../../assets/休息.png" alt="" /><br />
              <span>锦官</span>
            </li>
            <li>
              <img src="../../assets/喜欢.png" alt="" /><br />
              <span>锦官Career</span>
            </li>
            <li>
              <img src="../../assets/聊天.png" alt="" /><br />
              <span>锦官Taik</span>
            </li>
          </ul>
        </div>
        <div class="guan-info">
          <div class="box-map">
            <img src="../../assets/640x420.jpg" alt="" />
          </div>
          <div class="box-info">
            <div>
              <a>
                <div class="box-title"><span>访问</span> Visits</div>
                <div class="box-data">1768552</div>
              </a>
            </div>
            <div>
              <a>
                <div class="box-title"><span>会员</span> Member</div>
                <div class="box-data">55682</div>
              </a>
            </div>
            <div>
              <a>
                <div class="box-title"><span>活动</span> Activity</div>
                <div class="box-data">11399</div>
              </a>
            </div>
          </div>
          <div class="box-bottom">
            <div class="b-one"></div>
            <div class="b-two">
              <a>
                <img src="../../assets/喇叭_1.png" alt="" />
                【青年社群】上线啦！快来晒出你的社群！
              </a>
            </div>
          </div>
        </div>
        <div
          class="guan-list"
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled">
          <div
            class="info-list animate__animated animate__fadeInUp"
            v-for="item in count"
            :key="item">
            <div v-for="tabi in tbList" :key="tabi">
              {{tabi.guanTitle}}
            </div>
          </div>
          <p v-if="loading">加载中...</p>
          <p v-if="noMore">没有更多了</p>
        </div>
      </div>
      <!-- 底部按钮 animate__animated -->
      <div class="guan-menu">
        <router-link tag="div" to="">
          <span><img src="../../assets/爱心.png" alt="" /></span>
          <span>志愿者</span>
        </router-link>
        <router-link tag="div" to="">
          <span><img src="../../assets/商店.png" alt="" /></span>
          <span>青年之家</span>
        </router-link>
        <router-link tag="div" to="">
          <div class="major">
            <span><img src="../../assets/信息.png" alt="" /></span>
            <span>青小聊</span>
          </div>
        </router-link>
        <router-link tag="div" to="">
          <span><img src="../../assets/社交-团队.png" alt="" /></span>
          <span>青年社群</span>
        </router-link>
        <router-link tag="div" to="">
          <span><img src="../../assets/3.1我的.png" alt="" /></span>
          <span>我的</span>
        </router-link>
      </div>
    </div>
  </div>
</template>-->

<!--<script>
import componSwiper from "../../components/ComponSwiperMap.vue";
export default {
  components: {
    componSwiper,
  },
  data() {
    return {
      tbList: [
        { guanImg: "", guanTitle: "A1", guanContext: "" },
        { guanImg: "", guanTitle: "B2", guanContext: "" },
        { guanImg: "", guanTitle: "C3", guanContext: "" },
        { guanImg: "", guanTitle: "D4", guanContext: "" },
        { guanImg: "", guanTitle: "F5", guanContext: "" },
      ],
      count: 0,
      loading: false,
    };
  },
  computed: {
    noMore() {
      return this.count >= this.tbList.length;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 1;
        this.loading = false;
      }, 100);
    },
  },
};
</script>-->

<!--<style scoped lang="less">
body,
html {
  margin: 0;
  padding: 0;
  height: 100vh;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.jinguan {
  min-width: 320px;
  max-width: 800px;
  height: 100vh;
  background-color: white;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  display: flex;
  flex-direction: column;
  color: #8a8a8a;
}
.context {
  background-image: linear-gradient(#f19308 5%, #c52018 15%, #f5f5f5 75%);
  flex: 1;
  overflow-y: scroll;
}
.guan-menu {
  height: 60px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: row;
  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;
    font-size: 10px;
    position: relative;
  }
  img {
    width: 20px;
    height: 20px;
  }
}
.major {
  margin-bottom: 10px;
  background-color: rgb(255, 204, 0);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  padding: 10px 5px;
}
.rotation-map {
  width: 95%;
  height: 110px;
  margin: 15px auto;
  border-radius: 5px;
  box-shadow: 0px 3px 3px rgb(0 0 0 / 20%);
}
.nav {
  width: 95%;
  height: 60px;
  margin: 15px auto;
  font-size: 13px;
  color: white;
  li {
    float: left;
    width: 20%;
    text-align: center;
  }
  img {
    width: 40px;
    height: 40px;
  }
}
.guan-info {
  width: 95%;
  height: 280px;
  margin: 15px auto;
  border-radius: 5px;
  box-shadow: 0px 3px 3px rgb(0 0 0 / 20%);
}
.box-map {
  height: 115px;
  background-color: #f5f5f5;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.box-info {
  height: 65px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  div {
    flex: 1;
    text-indent: 10%;
    margin-top: 5px;
  }
}
.box-title {
  font-size: 15px;
  span {
    color: #3c3c3c;
  }
}
.box-data {
  color: rgb(255, 204, 0);
  font-weight: 600;
  font-size: 18px;
}
.box-bottom {
  background-color: #f5f5f5;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.b-one {
  height: 70px;
  background-color: aquamarine;
}
.b-two {
  height: 30px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    float: left;
  }
  a {
    float: left;
    font-size: 13px;
    line-height: 30px;
  }
}
.guan-list {
  margin-bottom: 30px;
  p {
    text-align: center;
  }
}
.info-list {
  height: 120px;
  border-top: 1px solid #3c3c3c;
}
</style>-->